<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="dns-prefetch" href="//www.google-analytics.com">
	<link rel="dns-prefetch" href="//www.googletagmanager.com">
	<title>Emergence.js | Detect element visibility in the browser</title>
	<meta name="description" content="Emergence.js is a lightweight, high-performance JS plugin for detecting and manipulating elements in the browser.">
	<meta name="keywords" content="emergence, emerging, javascript, js, css, plugin, utility, reveal, scroll, light, resize, animate, animation, trigger, element, manipulate, visibility, visible, ie8, ie9, ie10, ie11, edge, chrome, firefox, safari, mobile, hidden">
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@xtianmiller" />
	<meta name="twitter:creator" content="@xtianmiller" />
	<meta name="twitter:image" content="https://xtianmiller.github.io/emergence.js/dist/images/emergence-card.png" />
	<meta name="twitter:description" content="Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser." />
	<meta property="og:url" content="https://xtianmiller.github.io/emergence.js" />
	<meta property="og:site_name" content="Emergence.js" />
	<meta property="og:title" content="Emergence.js" />
	<meta property="og:description" content="Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser." />
	<meta property="og:image" content="https://xtianmiller.github.io/emergence.js/dist/images/emergence-card.png" />
	<link rel="stylesheet" type="text/css" href="dist/css/demo.min.css">
  <link rel="shortcut icon" href="dist/images/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="dist/images/apple-touch-icon-152x152.png">
  <link href="https://fonts.googleapis.com/css?family=Raleway:600|Pirata+One" rel="stylesheet">
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109159686-1"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	  gtag('config', 'UA-109159686-1');
	</script>
</head>
<body>
	<div class="page">
		<div class="page__content">
			<header class="header">
				<div class="logo">Emergence.js</div>
				<a href="https://github.com/xtianmiller/emergence.js" class="btn btn--small" target="_blank">Github / Docs</a>
			</header>
			<div class="fullscreen">
				<div class="container">
					<h1>Emergence.js</h1>
					<p>
						Lightweight, high-performance JS plugin for detecting and manipulating elements in the browser.
					</p>
					<a href="https://github.com/xtianmiller/emergence.js" class="btn" target="_blank">Github / Docs</a>
				</div>
			</div>
			<div class="container container--fluid">
				<div class="column column1">
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
				</div>
				<div class="column column2">
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
				</div>
				<div class="column column3">
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
					<div class="shape shape--triangle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>triangle</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M120 16l120 208H0"/></g></svg>
						</div>
					</div>
					<div class="shape shape--square" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>square</title><g fill="none" fill-rule="evenodd"><path fill="#ffffff" d="M20 20h200v200H20z"/></g></svg>
						</div>
					</div>
					<div class="shape shape--circle" data-emergence="hidden">
						<div class="shape__svg">
							<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg"><title>circle</title><g fill="none" fill-rule="evenodd"><circle fill="#ffffff" cx="120" cy="120" r="104"/></g></svg>
						</div>
					</div>
				</div>
			</div>
			<footer class="footer">
				<p>
					Created by <a href="https://twitter.com/xtianmiller" target="_blank">@xtianmiller</a>
				</p>
			</footer>
		</div>
		<div class="offset offset__top"></div>
		<div class="offset offset__bottom"></div>
		<div class="page__bg"></div>
	</div>
	<script src="dist/js/emergence.min.js"></script>
	<script>
		emergence.init({
		  reset: true,
		  handheld: true,
		  elemCushion: 0.50,
		  offsetTop: 100,
		  offsetBottom: 100,
		  throttle: 300
		});
	</script>
	<script src="dist/js/demo.min.js"></script>
</body>
